<template>
  <div class="sort">
  <div class="sorting">
  <div class="block">
  <span class="demonstration">分拣日期</span>
  <el-date-picker v-model="startTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
  </el-date-picker>
  </div>
  <div class="block">
  <span class="demonstration">分拣线</span>
  <el-cascader v-model="SortingLine" :options="options"></el-cascader>
  </div>
  <div class="demonstration">
  <span>分拣状态</span>
  <el-select v-model="sorting" placeholder="请选择">
  <el-option v-for="item in sortStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
  </div>
  <el-button type="primary" style="margin-left:100px;" @click="searchList">搜索</el-button>
  <el-button type="primary" style="margin-left:50px;" @click="toaddorder">新增分拣计划</el-button>
  </div>
  <div class="table-light">
  <el-table :data="sortingList" border style="width: 100%">
  <el-table-column fixed prop="supervisorName" label="序号" type="index" width="100"></el-table-column>
  <el-table-column prop="sortSn" label="分拣单号" width="120"></el-table-column>
    <el-table-column prop="addTime" label="分拣日期" width="120"></el-table-column>
  <el-table-column prop="sortLineName" label="分拣线" width="120"></el-table-column>
  <el-table-column prop="shifts" label="班次" width="120">
  <template slot-scope="scope">
  <span v-if="scope.row.shifts == 1">早班</span>
  <span v-if="scope.row.shifts == 2">晚班</span>
  </template>
  </el-table-column>
  <el-table-column prop="supervisorName" label="分拣主管" width="120"></el-table-column>
  <el-table-column prop="goodsCategory" label="品种数量" width="120"></el-table-column>
  <el-table-column prop="plannedProduction" label="计划数量" width="120"></el-table-column>
  <el-table-column prop="realityPlannedProduction" label="实际数量" width="120"></el-table-column>
  <el-table-column prop="status" label="分拣状态" width="120">
  <template slot-scope="scope">
  <span v-if="scope.row.status == 0">排产</span>
  <span v-if="scope.row.status == 1">加工</span>
  <span v-if="scope.row.status == 2">完成</span>
  </template>
  </el-table-column>
  <el-table-column prop="startAllocatingDate" label="开始时间" width="120"></el-table-column>
  <el-table-column prop="endAllocatingDate" label="结束时间" width="120"></el-table-column>
  <el-table-column fixed="right" label="操作" width="200">
  <template slot-scope="scope">
  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
  <el-button @click="sortplandele(scope.row)" type="text" size="small">删除</el-button>
  </template>
  </el-table-column>
  </el-table>
  </div>
    <!-- 分页器 -->
  <div class="current">
  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="this.total"></el-pagination>
  </div>
  </div>
 </template>

<script>
import {fb,supervisor,sortplandele} from "@/api/user.js";
  export default {
    name:'menu1',
    data() {
      return {
      sortingList:[],
      options:[],
      SortingLine:'',
      startTime:'',
      sorting:'',
      total:0,
      sortStatus: [{value: '0',label: '排产'}, {value: '1',label: '加工'}],
    };
  },
  mounted() {
    this.getsortingList();
    this.supervisor();
  },
  methods: {
  //搜索列表
  searchList(){
  this.getsortingList()
  },
  handleClick(row) {
  this.$router.push({name: "menu2",query: { id:row.id}});
  },
  toaddorder(){
  this.$router.push({ name: 'menu3'})
  },
  getsortingList(){
  let data ={
  pageNo:this.pageNo,
  pageSize:this.pageSize,
  startTime:this.startTime, 
  sortLineId:this.SortingLine[0],
  sortSupervisorId:this.SortingLine[1],
  sortStatus:this.sorting
  }
  fb(data).then(res=>{
  console.log(res)
  this.sortingList = res.rows
  this.total=res.total
  })
  },
  handleSizeChange(val) {
  this.pagesize=val
  this.getsortingList()
  },
  handleCurrentChange(val) {
  this.pageNo=val
  this.getsortingList()
  },
  supervisor(){
  supervisor().then(res=>{
  console.log(res)
  this.options=res.rows   
  })
  },
  sortplandele(row){
  let id = row.id
  console.log(id)
  sortplandele(id).then( res => {
  console.log(res)
  if(res.code == 20000){
  this.$message(res.msg)
  this.getsortingList()
  }else{
  this.$message({type:'warning',message:res.msg})
  }
  })
  }
  }
  }

</script>

<style lang="scss">
.sorting {
  font-size: 12px;
  display: flex;
  padding: 20px 40px;
.demonstration{
  font-size: 14px;
  color:#606266;
  margin-right:5px;
}
  .block {
    margin-right: 20px;
  }
  .sortingLine {
    display: flex;
    align-items: center;
    > div {
      margin-right: 20px;
    }
  }
}
.table-light {
  padding: 40px;
}
.current {
 text-align: center;
}
</style>
